<template>
  <div calss="mine-page">
    <div class="header">
      <span>我的</span>
      <div class="set">
        <van-icon name="setting" @click="jumpsetting" />
      </div>
    </div>
    <div class="main">
      <div class="mine">
        <div class="mine-left">
          <img src="../../../public/icon.webp" alt="">
        </div>
        <div class="mine-c">
          <span>{{phone}}</span>
          <p>vip 认证</p>
        </div>
        <div class="mine-right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="mine-bottom">
        <div class="mine-b1">
          <span>5</span>
          <p>我的收藏</p>
        </div>
        <div class="mine-b1">
          <span>340</span>
          <p>我的足迹</p>
        </div>
        <div class="mine-b1">
          <span>2</span>
          <p>关注视频</p>
        </div>
      </div>
      <div class="order">
        <div class="order-top">
          <p>我的订单</p>
          <span>查看更多</span>
        </div>
        <div class="order-bottom">
          <div class="icon">
            <img src="../../../public/dingdan.png" alt="">
            <p class="icon-p">我的订单</p>
          </div>
          <div class="icon">
            <img src="../../../public/fukuan.png" alt="">
            <p class="icon-p">已付款</p>
          </div>
          <div class="icon">
            <img src="../../../public/shouhuo.png" alt="">
            <p class="icon-p">已收货</p>
          </div>
          <div class="icon">
            <img src="../../../public/quxiao.png" alt="">
            <p class="icon-p">已取消</p>
          </div>
        </div>
      </div>
      <div class="ticket_ed">
        <van-coupon-cell coupons="showList" :chosen-coupon="chosenCoupon" @click="showList = true" />
        <van-popup v-model:show="showList" round position="bottom" style="height: 80%; padding-top: 4px;">
          <div class="ticket" v-for="item in couponList" :key="item.id">
            <div class="ticker-left">
              <div class="tick">
                <p class="price">{{ item.valueDesc }}</p>
                <span class="pricen">元</span>
              </div>
              <p class="like">{{ item.condition.split('\n')[0] }}</p>
              <p class="like">{{ item.condition.split('\n')[1] }}</p>
            </div>
            <div class="ticker-c">
              <p>{{ item.name }}</p>
              <p>2022-11-07</p>
            </div>
            <div class="ticker-right">
              <van-icon name="arrow" />
            </div>
          </div>
        </van-popup>
        <div class="tuijianma">
          <van-cell title="二维码" is-link @click="showAgreement = true" />
          <van-popup v-model:show="showAgreement" position="bottom">
            <div class="erweima">
              <img src="../../../public/zcool.webp" alt="">
            </div>
          </van-popup>

        </div>
      </div>
      <div class="client">
        <div class="client1">
          <van-cell title="客户中心" is-link @click="showkehu = true" />
          <van-popup v-model:show="showkehu" position="bottom">
            <p class="pootext">不论我隔着屏幕跟你吵的多凶，见到你的那一刻，笑容就出卖了我

              所有人都觉得你不好 ，可你在我这依然是个宝

              你陪我四季更替不离，我伴你岁月风雨兼程不弃

              我想过很多后果，我都能接受，唯独没有了你的结局，我接受不了。

              如果，一开始就是个错，那么我宁愿一错再错，为了你 我可以失去理智，因为我没有了你 就更没有了理智

              既然上了我的贼船 ，就做我的海盗吧

              世界那么大，遇见你真好，相识真好，相知真好，相爱真好，有你真好

              想与你三餐四季，想与你朝阳暮夕，想与你白头偕老，想与你相遇来世，

              我们兜兜转转才遇到，我怎么忍心回到原点

              你笑着和我拥抱的那天晚上，过了一会，我看见你的眼镜已经模糊了
            </p>
          </van-popup>
        </div>
        <div class="client2">
          <van-cell title="帮助中心" is-link @click="showkehu = true" />
          <van-popup v-model:show="showkehu" position="bottom">
            <p class="pootext">不论我隔着屏幕跟你吵的多凶，见到你的那一刻，笑容就出卖了我

              所有人都觉得你不好 ，可你在我这依然是个宝

              你陪我四季更替不离，我伴你岁月风雨兼程不弃

              我想过很多后果，我都能接受，唯独没有了你的结局，我接受不了。

              如果，一开始就是个错，那么我宁愿一错再错，为了你 我可以失去理智，因为我没有了你 就更没有了理智

              既然上了我的贼船 ，就做我的海盗吧

              世界那么大，遇见你真好，相识真好，相知真好，相爱真好，有你真好

              想与你三餐四季，想与你朝阳暮夕，想与你白头偕老，想与你相遇来世，

              我们兜兜转转才遇到，我怎么忍心回到原点

              你笑着和我拥抱的那天晚上，过了一会，我看见你的眼镜已经模糊了
            </p>
          </van-popup>
        </div>
        <div class="client3">
          <van-cell title="关于我们" is-link @click="showGuanyu = true" />
          <van-popup v-model:show="showGuanyu" position="bottom">
            <p class="pootext">
            </p>
          </van-popup>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue';
import { conponListApi } from '../../apis/mineApi'
const couponList = ref([])
const coupon = ref('')
const phone = ref('')
async function getConponList() {
  const result = await conponListApi().then(d => {
    if (d.code === 200) {
      // console.log(d)
      couponList.value = d.data
      console.log(couponList.value)
    }
  })
}
getConponList()

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);
const router = useRouter();

// 弹出窗
const showAgreement = ref(false)
function agreementEvt() {
  showAgreement.value = false
}
const showkehu = ref(false)
function  showKehuEvt() {
  showkehu.value = false
}
const showGuanyu = ref(false)
function  showGuanyuEvt() {
  showGuanyu.value = false
}


function jumpsetting() {
  router.push('/setting')
}

onMounted(()=>{
  phone.value = localStorage.getItem('phone')
})

</script>

<style scoped   lang="less">
@import '../../style/common.less';

.mine-page {
  display: block;
  position: relative;
  height: 100%;
}

.header {
  width: 100%;
  height: 48px;
  text-align: center;
  font-size: .9rem;
  color: white;
  line-height: 48px;
  background-image: linear-gradient(to top, @c03, @c05);

  >span {
    padding-left: 10px;
  }
}

.set {
  display: inline-block;
  float: right;
  padding-right: 10px;
}

.main {}

.mine {
  display: flex;
  padding-top: 10px;
  height: 240px;
  padding-left: 20px;
  padding-right: 20px;
  background-image: linear-gradient(to bottom, @c03, @c05, );
  border-top: 1px solid #fff;

}

.mine-left {
  height: 65px;
}

.mine-left img {
  border: 1px solid #ccc;
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.mine-c {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  height: 50px;
}

.mine-c span {
  font-size: 20px;
  color: #fff;
  padding-top: 10px;
  font-size: 16px;
}

.mine-c p {
  width: 60px;
  height: 20px;
  background: #fff;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  display: inline-block;
  color: orange;
  border-radius: 30px;
}

.mine-right {
  font-size: 30px;
  position: absolute;
  right: 20px;
  padding-top: 20px;
  color: #fff;
}

.mine-bottom {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 150px;
  display: flex;
  justify-content: space-around;


  >.mine-b1 {
    color: #fff;
    font-size: 16px;
    text-align: center;
  }
}

.order {
  width: 100%;
  position: absolute;
  left: 0;
  top: 220px;

}

.order-top {
  background: #fff;
  margin: 0 20px;
  height: 35px;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: space-between;
}

.order-top p {
  display: block;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  padding-left: 10px;
  margin: 0 0 0 0;
}

.order-top span {
  display: block;
  width: 100px;
  padding-left: 20px;
  height: 35px;
  font-size: 12px;
  line-height: 35px;
  font-weight: 300;
  text-align: center;

}

.order-bottom {
  background: #fff;
  margin: 0 20px;
  display: flex;
  justify-content: space-around;
}

.icon {
  width: 18%;
  height: 70px;
  text-align: center;
  padding-top: 10px;


}

.order-bottom img {
  width: 20px;
  height: 20px;
}

.icon-p {
  font-size: 14px;
  margin: 0 0 0 0;
}

.van-coupon-cell {
  margin-top: 60px;
}

.ticket {
  display: flex;
  margin: 10px 10px;
  border-radius: 20px;
  height: 150px;
  border: 1px solid #ccc;

}

.ticker-left {
  width: 120px;
}

.tick {
  display: flex;
  justify-content: center;
  width: 120px;
}

.pricen {

  justify-items: center;
  font-size: 16px;
  color: red;
  padding-top: 28px;
  padding-left: 10px;
  text-align: center;

}

.price {

  font-size: 25px;
  color: red;
  padding-left: 10px;

}

.like {
  text-align: center;
  font-size: 16px;
  margin: 0 0 0 0;
  padding-left: 10px;
  color: red;
}

.ticker-c {
  padding: 25px;
  font-size: 16px;
}

.ticker-right {
  width: 80px;
  display: flex;
  justify-content: end;
  font-size: 30px;
  align-items: center;
}

.tuijianma {
  height: 44px;
  display: flex;
  justify-content: space-between;
  margin: 0 0 0 0;
  border-top: 1px solid #ccc;
  background: white;

}

.erweima {
  padding-top: 100px;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.erweima img {
  width: 280px;
  height: 300px;
  margin-top: 50px;

}
.client{
  margin-top: 20px;
}
.pootext{
  padding: 0 20px;
  height: 400px;
  font-size: 16px;
  text-indent: 30px;
  line-height: 35px;
  }
  .client2{
    border-top: 1px solid #ccc;
  }
  .client3{
    border-top: 1px solid #ccc;
  }
</style>
